<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getCurrentWindow } from "@tauri-apps/api/window";

const currentView = ref('welcome');
const loveMessages = ref([
  "还记得我们第一次相遇的那个午后吗？阳光正好，你的笑容比阳光还要温暖... 💕",
  "每当夜深人静的时候，我总是想起你说过的话，想起你的温柔，想起我们一起走过的每一个瞬间... 🌙",
  "如果时光可以倒流，我还是会选择在那个特定的时刻遇见你，因为你让我的生命变得完整... ✨",
  "你知道吗？每次看到你哭，我的心都会跟着疼。我想成为你的避风港，让你永远不再孤单... 🤗",
  "我们一起哭过，一起笑过，一起做过很多傻事。这些回忆是我最珍贵的宝藏... 💎",
  "有时候我会想，如果没有遇见你，我的世界会是什么样子？可能还是黑白的吧... 🌈",
  "你说过最想要的不是昂贵的礼物，而是我能一直陪在你身边。我记得，我会做到... 💍",
  "每个七夕，我都想对你说：谢谢你选择了我，谢谢你让我成为更好的人... 🙏"
]);
const currentMessageIndex = ref(0);
const showHearts = ref(false);
const showFireworks = ref(false);
const showRainbow = ref(false);
const showMagicParticles = ref(false);
const userName = ref("我的宝贝");
const loveScore = ref(100);
const currentMusic = ref('paused');
const currentAudioUrl = ref('');
const audioVolume = ref(0.7);
const audioProgress = ref(0);
const audioDuration = ref(0);
const currentSongIndex = ref(0);
const showMusicUpload = ref(false);
const audioElement = ref<HTMLAudioElement | null>(null);
const showLoveRain = ref(false);
const currentTheme = ref('purple');
const showSpecialEffect = ref(false);
const memoryEntries = ref([
  { id: 1, date: '2023年春天', title: '我们的第一次约会', content: '那天你穿着白色连衣裙，我们在公园里聊了整整一个下午，你说你最喜欢看夕阳...', emotion: 'sweet', image: '🌸' },
  { id: 2, date: '2023年夏天', title: '第一次说我爱你', content: '在那个星空璀璨的夜晚，我鼓起勇气说出了那三个字，你的眼中有星星在闪烁...', emotion: 'romantic', image: '⭐' },
  { id: 3, date: '2023年秋天', title: '我们的第一次吵架', content: '那次我们都哭了，但最后我们拥抱在一起，我们学会了如何更好地爱对方...', emotion: 'growth', image: '🍂' },
  { id: 4, date: '2023年冬天', title: '一起看雪的日子', content: '雪花纷飞的那个晚上，我们手牵手走在雪地里，你说这是你见过最美的雪...', emotion: 'warm', image: '❄️' },
  { id: 5, date: '2024年春天', title: '你生病的那些天', content: '你发烧的时候，我整夜没睡陪着你，那时我才明白什么叫心疼...', emotion: 'caring', image: '💊' },
  { id: 6, date: '2024年夏天', title: '我们一起哭过的那个夜晚', content: '当你告诉我你的梦想时，我们都哭了，不是因为难过，而是因为感动...', emotion: 'deep', image: '💧' }
]);
const currentMemoryIndex = ref(0);
const showMemoryModal = ref(false);
const loveLetters = ref([
  { id: 1, title: '写给未来的我们', content: '亲爱的，如果有一天我们都老了，我希望我们还能像现在这样相爱...', date: '永远' },
  { id: 2, title: '感谢遇见你', content: '谢谢你出现在我的生命里，让我知道什么是真正的幸福...', date: '每一天' },
  { id: 3, title: '我的承诺', content: '我承诺会一直爱你，保护你，陪伴你走过人生的每一个阶段...', date: '此生此世' }
]);
const showLoveLetterModal = ref(false);
const currentLetterIndex = ref(0);
const surpriseMessages = ref([
  '你知道吗？每次看到你的名字出现在我的手机上，我都会不自觉地笑起来 😊',
  '有时候我会偷偷看你睡觉的样子，你睡着的时候像个天使一样美丽 👼',
  '我把我们的聊天记录都保存了下来，每次重读都会被感动一遍 💌',
  '你的每一个表情，每一个动作，我都深深地印在心里 💕',
  '即使全世界都背叛我，我也相信你会站在我这边 🤝'
]);
const showSurpriseModal = ref(false);
const emotionalMoments = ref(0);
const showEmotionalOverlay = ref(false);
const currentVideoUrl = ref('');
const isVideoPlaying = ref(false);
const videoVolume = ref(0.7);
const videoProgress = ref(0);
const videoDuration = ref(0);
const showVideoControls = ref(true);

// 判断是否为开发环境
const isDevelopment = ref(import.meta.env.DEV);

// 音乐播放列表
const musicPlaylist = ref([
  {
    id: 1,
    title: '月亮代表我的心',
    artist: '邓丽君',
    url: isDevelopment.value ? '' : '/music/moon-heart.mp3',
    filename: 'moon-heart.mp3',
    emoji: '🌙'
  },
  {
    id: 2,
    title: '甜蜜蜜',
    artist: '邓丽君',
    url: isDevelopment.value ? '' : '/music/sweet-honey.mp3',
    filename: 'sweet-honey.mp3',
    emoji: '🍯'
  },
  {
    id: 3,
    title: '我只在乎你',
    artist: '邓丽君',
    url: isDevelopment.value ? '' : '/music/only-care-you.mp3',
    filename: 'only-care-you.mp3',
    emoji: '💕'
  },
  {
    id: 4,
    title: '星语心愿',
    artist: '张柏芝',
    url: isDevelopment.value ? '' : '/music/star-wish.mp3',
    filename: 'star-wish.mp3',
    emoji: '⭐'
  }
]);

// 视频播放列表 - 生产环境使用预设路径
const videoPlaylist = ref([
  { 
    id: 1, 
    title: '我们的第一次约会', 
    url: isDevelopment.value ? '' : '/videos/first-date.mp4', 
    thumbnail: '🎬', 
    description: '那个美好的下午，我们一起走过的每一步...',
    filename: 'first-date.mp4'
  },
  { 
    id: 2, 
    title: '生日惊喜视频', 
    url: isDevelopment.value ? '' : '/videos/birthday-surprise.mp4', 
    thumbnail: '🎂', 
    description: '为你准备的生日惊喜，满满的爱意...',
    filename: 'birthday-surprise.mp4'
  },
  { 
    id: 3, 
    title: '旅行回忆', 
    url: isDevelopment.value ? '' : '/videos/travel-memories.mp4', 
    thumbnail: '✈️', 
    description: '我们一起去过的地方，留下的美好回忆...',
    filename: 'travel-memories.mp4'
  },
  { 
    id: 4, 
    title: '日常温馨时光', 
    url: isDevelopment.value ? '' : '/videos/daily-moments.mp4', 
    thumbnail: '🏠', 
    description: '平凡却珍贵的日常生活片段...',
    filename: 'daily-moments.mp4'
  }
]);
const currentVideoIndex = ref(0);
const showVideoUpload = ref(false);
const isMaximized = ref(false);
const currentTime = ref('');

const switchView = (view: string) => {
  currentView.value = view;
};

const showNextMessage = () => {
  currentMessageIndex.value = (currentMessageIndex.value + 1) % loveMessages.value.length;
  triggerRandomEffect();
  loveScore.value += 10;
};

const createHeart = () => {
  showHearts.value = true;
  setTimeout(() => showHearts.value = false, 3000);
};

const triggerRandomEffect = () => {
  const effects = ['hearts', 'fireworks', 'rainbow', 'particles', 'loveRain'];
  const randomEffect = effects[Math.floor(Math.random() * effects.length)];
  
  switch(randomEffect) {
    case 'hearts':
      showHearts.value = true;
      setTimeout(() => showHearts.value = false, 3000);
      break;
    case 'fireworks':
      showFireworks.value = true;
      setTimeout(() => showFireworks.value = false, 4000);
      break;
    case 'rainbow':
      showRainbow.value = true;
      setTimeout(() => showRainbow.value = false, 5000);
      break;
    case 'particles':
      showMagicParticles.value = true;
      setTimeout(() => showMagicParticles.value = false, 6000);
      break;
    case 'loveRain':
      showLoveRain.value = true;
      setTimeout(() => showLoveRain.value = false, 4000);
      break;
  }
};

const changeTheme = () => {
  const themes = ['purple', 'pink', 'blue', 'golden', 'rainbow'];
  const currentIndex = themes.indexOf(currentTheme.value);
  currentTheme.value = themes[(currentIndex + 1) % themes.length];
  showSpecialEffect.value = true;
  setTimeout(() => showSpecialEffect.value = false, 2000);
};

const triggerSuperEffect = () => {
  showHearts.value = true;
  showFireworks.value = true;
  showRainbow.value = true;
  showMagicParticles.value = true;
  loveScore.value += 50;
  emotionalMoments.value++;
  
  // 随机触发惊喜弹窗
  if (Math.random() > 0.7) {
    setTimeout(() => {
      showSurpriseModal.value = true;
    }, 2000);
  }
  
  setTimeout(() => {
    showHearts.value = false;
    showFireworks.value = false;
    showRainbow.value = false;
    showMagicParticles.value = false;
  }, 5000);
};

const openMemoryModal = (index: number) => {
  currentMemoryIndex.value = index;
  showMemoryModal.value = true;
  triggerEmotionalMoment();
};

const openLoveLetterModal = (index: number) => {
  currentLetterIndex.value = index;
  showLoveLetterModal.value = true;
  triggerEmotionalMoment();
};

const triggerEmotionalMoment = () => {
  emotionalMoments.value++;
  showEmotionalOverlay.value = true;
  setTimeout(() => {
    showEmotionalOverlay.value = false;
  }, 3000);
};

const playVideo = (index: number) => {
  currentVideoIndex.value = index;
  const video = videoPlaylist.value[index];
  if (video.url) {
    currentVideoUrl.value = video.url;
    isVideoPlaying.value = true;
    triggerRandomEffect();
  } else {
    if (isDevelopment.value) {
      // 开发环境：显示上传界面
      showVideoUpload.value = true;
    } else {
      // 生产环境：提示视频不可用
      alert('此视频暂时不可用，请稍后再试。');
    }
  }
};

const toggleVideoPlay = () => {
  const videoElement = document.querySelector('.video-player video') as HTMLVideoElement;
  if (videoElement) {
    if (isVideoPlaying.value) {
      videoElement.pause();
      isVideoPlaying.value = false;
    } else {
      videoElement.play();
      isVideoPlaying.value = true;
    }
  }
};

const updateVideoProgress = (event: Event) => {
  const videoElement = event.target as HTMLVideoElement;
  if (videoDuration.value > 0) {
    videoProgress.value = (videoElement.currentTime / videoDuration.value) * 100;
  }
};

const updateVideoDuration = (event: Event) => {
  const videoElement = event.target as HTMLVideoElement;
  videoDuration.value = videoElement.duration;
};

const seekVideo = (event: Event) => {
  const progressBar = event.target as HTMLElement;
  const rect = progressBar.getBoundingClientRect();
  const clickX = (event as MouseEvent).clientX - rect.left;
  const percentage = clickX / rect.width;
  const videoElement = document.querySelector('.video-player video') as HTMLVideoElement;
  if (videoElement && videoDuration.value > 0) {
    videoElement.currentTime = percentage * videoDuration.value;
  }
};

const changeVideoVolume = (event: Event) => {
  const slider = event.target as HTMLInputElement;
  videoVolume.value = parseFloat(slider.value);
  const videoElement = document.querySelector('.video-player video') as HTMLVideoElement;
  if (videoElement) {
    videoElement.volume = videoVolume.value;
  }
};

const handleVideoUpload = async (event: Event) => {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  if (file && file.type.startsWith('video/')) {
    if (isDevelopment.value) {
      // 开发环境：使用临时URL
      const url = URL.createObjectURL(file);
      videoPlaylist.value[currentVideoIndex.value].url = url;
      currentVideoUrl.value = url;
      
      // 提示用户将文件保存到public/videos目录
      alert(`请将此视频文件重命名为 "${videoPlaylist.value[currentVideoIndex.value].filename}" 并保存到 public/videos/ 目录下，以便打包后使用。`);
    } else {
      // 生产环境：不允许上传
      alert('生产环境不支持上传功能，请联系开发者添加视频。');
      return;
    }
    
    showVideoUpload.value = false;
    isVideoPlaying.value = true;
    triggerSuperEffect();
  }
};

const nextVideo = () => {
  const nextIndex = (currentVideoIndex.value + 1) % videoPlaylist.value.length;
  playVideo(nextIndex);
};

const prevVideo = () => {
  const prevIndex = currentVideoIndex.value === 0 ? videoPlaylist.value.length - 1 : currentVideoIndex.value - 1;
  playVideo(prevIndex);
};

// 音乐播放相关函数
const playMusic = (index: number) => {
  currentSongIndex.value = index;
  const song = musicPlaylist.value[index];
  if (song.url) {
    currentAudioUrl.value = song.url;
    if (audioElement.value) {
      audioElement.value.src = song.url;
      audioElement.value.play();
      currentMusic.value = 'playing';
      triggerRandomEffect();
    }
  } else {
    if (isDevelopment.value) {
      showMusicUpload.value = true;
    } else {
      alert('此音乐暂时不可用，请稍后再试。');
    }
  }
};

const toggleMusicPlay = () => {
  if (!audioElement.value) return;
  
  if (currentMusic.value === 'playing') {
    audioElement.value.pause();
    currentMusic.value = 'paused';
  } else {
    if (currentAudioUrl.value) {
      audioElement.value.play();
      currentMusic.value = 'playing';
    } else {
      // 如果没有当前音乐，播放第一首
      playMusic(0);
    }
  }
};

const updateAudioProgress = () => {
  if (audioElement.value && audioDuration.value > 0) {
    audioProgress.value = (audioElement.value.currentTime / audioDuration.value) * 100;
  }
};

const updateAudioDuration = () => {
  if (audioElement.value) {
    audioDuration.value = audioElement.value.duration;
  }
};

const seekAudio = (event: Event) => {
  const progressBar = event.target as HTMLElement;
  const rect = progressBar.getBoundingClientRect();
  const clickX = (event as MouseEvent).clientX - rect.left;
  const percentage = clickX / rect.width;
  if (audioElement.value && audioDuration.value > 0) {
    audioElement.value.currentTime = percentage * audioDuration.value;
  }
};

const changeAudioVolume = (event: Event) => {
  const slider = event.target as HTMLInputElement;
  audioVolume.value = parseFloat(slider.value);
  if (audioElement.value) {
    audioElement.value.volume = audioVolume.value;
  }
};

const nextSong = () => {
  const nextIndex = (currentSongIndex.value + 1) % musicPlaylist.value.length;
  playMusic(nextIndex);
};

const prevSong = () => {
  const prevIndex = currentSongIndex.value === 0 ? musicPlaylist.value.length - 1 : currentSongIndex.value - 1;
  playMusic(prevIndex);
};

const handleMusicUpload = (event: Event) => {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  if (file && file.type.startsWith('audio/')) {
    if (isDevelopment.value) {
      const url = URL.createObjectURL(file);
      musicPlaylist.value[currentSongIndex.value].url = url;
      currentAudioUrl.value = url;
      
      alert(`请将此音乐文件重命名为 "${musicPlaylist.value[currentSongIndex.value].filename}" 并保存到 public/music/ 目录下，以便打包后使用。`);
      
      if (audioElement.value) {
        audioElement.value.src = url;
        audioElement.value.play();
        currentMusic.value = 'playing';
      }
    } else {
      alert('生产环境不支持上传功能，请联系开发者添加音乐。');
      return;
    }
    
    showMusicUpload.value = false;
    triggerSuperEffect();
  }
};

// 时间格式化函数
const formatTime = (seconds: number): string => {
  if (isNaN(seconds)) return '0:00';
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
};

// 窗口控制函数
const appWindow = getCurrentWindow();

const minimizeWindow = async () => {
  await appWindow.minimize();
};

const toggleMaximize = async () => {
  await appWindow.toggleMaximize();
  isMaximized.value = await appWindow.isMaximized();
};

const closeWindow = async () => {
  await appWindow.close();
};

const updateCurrentTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

const closeSurpriseModal = () => {
  showSurpriseModal.value = false;
};

const generateRandomSurprise = () => {
  showSurpriseModal.value = true;
};

const getEmotionText = (emotion: string) => {
  const emotionMap: Record<string, string> = {
    sweet: '甜蜜时光 💕',
    romantic: '浪漫回忆 💖',
    growth: '成长足迹 🌱',
    warm: '温暖瞬间 🔥',
    caring: '关怀呵护 🤗',
    deep: '深情时刻 💧'
  };
  return emotionMap[emotion] || '美好回忆 ✨';
};

onMounted(async () => {
  // 启动时的浪漫动画
  setTimeout(() => {
    createHeart();
  }, 1000);
  
  // 定时触发惊喜
  setInterval(() => {
    if (Math.random() > 0.8) {
      generateRandomSurprise();
    }
  }, 30000); // 每30秒有20%概率触发惊喜
  
  // 欢迎惊喜
  setTimeout(() => {
    showSurpriseModal.value = true;
  }, 3000);
  
  // 初始化音频元素
  audioElement.value = new Audio();
  audioElement.value.volume = audioVolume.value;
  
  // 音频事件监听
  audioElement.value.addEventListener('timeupdate', updateAudioProgress);
  audioElement.value.addEventListener('loadedmetadata', updateAudioDuration);
  audioElement.value.addEventListener('ended', nextSong);
  audioElement.value.addEventListener('pause', () => {
    currentMusic.value = 'paused';
  });
  audioElement.value.addEventListener('play', () => {
    currentMusic.value = 'playing';
  });
  
  // 初始化窗口状态
  const window = getCurrentWindow();
  isMaximized.value = await window.isMaximized();
  
  // 更新时间
  updateCurrentTime();
  setInterval(updateCurrentTime, 1000);
  
  // 监听窗口状态变化
  window.listen('tauri://resize', async () => {
    isMaximized.value = await window.isMaximized();
  });
});
</script>

<template>
  <div class="romantic-app" :class="`theme-${currentTheme}`">
    <!-- 自定义标题栏 -->
    <div class="custom-titlebar" data-tauri-drag-region>
      <div class="titlebar-left">
        <div class="app-icon">💕</div>
        <div class="app-title">七夕之约 - 浪漫回忆</div>
      </div>
      <div class="titlebar-center">
        <div class="current-time">{{ currentTime }}</div>
        <div class="love-indicator">
          <span class="heart-beat">💖</span>
          <span class="love-text">爱意满满</span>
        </div>
      </div>
      <div class="titlebar-right">
        <button class="titlebar-btn minimize-btn" @click.stop="minimizeWindow" title="最小化">
          <svg width="12" height="12" viewBox="0 0 12 12">
            <rect x="2" y="5" width="8" height="2" fill="currentColor"/>
          </svg>
        </button>
        <button class="titlebar-btn maximize-btn" @click.stop="toggleMaximize" :title="isMaximized ? '还原' : '最大化'">
          <svg width="12" height="12" viewBox="0 0 12 12" v-if="!isMaximized">
            <rect x="2" y="2" width="8" height="8" stroke="currentColor" stroke-width="1.5" fill="none"/>
          </svg>
          <svg width="12" height="12" viewBox="0 0 12 12" v-else>
            <rect x="2" y="3" width="6" height="6" stroke="currentColor" stroke-width="1.5" fill="none"/>
            <rect x="4" y="1" width="6" height="6" stroke="currentColor" stroke-width="1.5" fill="none"/>
          </svg>
        </button>
        <button class="titlebar-btn close-btn" @click.stop="closeWindow" title="关闭">
          <svg width="12" height="12" viewBox="0 0 12 12">
            <path d="M2 2 L10 10 M10 2 L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 动态渐变背景 -->
    <div class="dynamic-background"></div>
    <div class="animated-waves"></div>
    <div class="floating-bubbles">
      <div class="bubble" v-for="i in 20" :key="i" :style="{
        left: Math.random() * 100 + '%',
        animationDelay: Math.random() * 5 + 's',
        animationDuration: (Math.random() * 10 + 5) + 's'
      }"></div>
    </div>

    <!-- 浮动的爱心动画 -->
    <div class="hearts-container" v-if="showHearts">
      <div class="heart" v-for="i in 15" :key="i" :style="{ 
        left: Math.random() * 100 + '%',
        animationDelay: Math.random() * 2 + 's',
        animationDuration: (Math.random() * 3 + 2) + 's'
      }">💖</div>
    </div>

    <!-- 烟花特效 -->
    <div class="fireworks-container" v-if="showFireworks">
      <div class="firework" v-for="i in 8" :key="i" :style="{
        left: Math.random() * 100 + '%',
        top: Math.random() * 50 + '%',
        animationDelay: Math.random() * 2 + 's'
      }">
        <div class="explosion"></div>
      </div>
    </div>

    <!-- 彩虹特效 -->
    <div class="rainbow-container" v-if="showRainbow">
      <div class="rainbow"></div>
    </div>

    <!-- 魔法粒子 -->
    <div class="magic-particles" v-if="showMagicParticles">
      <div class="particle" v-for="i in 30" :key="i" :style="{
        left: Math.random() * 100 + '%',
        top: Math.random() * 100 + '%',
        animationDelay: Math.random() * 3 + 's'
      }">✨</div>
    </div>

    <!-- 爱心雨 -->
    <div class="love-rain" v-if="showLoveRain">
      <div class="rain-drop" v-for="i in 25" :key="i" :style="{
        left: Math.random() * 100 + '%',
        animationDelay: Math.random() * 3 + 's',
        animationDuration: (Math.random() * 2 + 1) + 's'
      }">💕</div>
    </div>

    <!-- 星空背景 -->
    <div class="stars">
      <div class="star" v-for="i in 80" :key="i" :style="{
        left: Math.random() * 100 + '%',
        top: Math.random() * 100 + '%',
        animationDelay: Math.random() * 3 + 's'
      }"></div>
    </div>

    <!-- 特殊效果覆盖层 -->
    <div class="special-effect-overlay" v-if="showSpecialEffect"></div>

    <!-- 主界面 -->
    <div class="main-content">
      <!-- 欢迎界面 -->
      <div v-if="currentView === 'welcome'" class="welcome-view">
        <div class="romantic-title">
          <h1 class="gradient-text">💕 七夕之约 💕</h1>
          <p class="subtitle">为我最爱的人准备的浪漫惊喜</p>
        </div>
        
        <!-- 爱情指数显示 -->
        <div class="love-meter">
          <div class="meter-label">💖 爱情指数</div>
          <div class="meter-bar">
            <div class="meter-fill" :style="{ width: Math.min(loveScore, 500) / 5 + '%' }"></div>
          </div>
          <div class="meter-score">{{ loveScore }}%</div>
        </div>

        <div class="love-card">
          <div class="card-content">
            <div class="emoji-large">🌹</div>
            <h2>{{ userName }}</h2>
            <p class="love-message">{{ loveMessages[currentMessageIndex] }}</p>
            <button @click="showNextMessage" class="romantic-btn pulse-btn">
              💝 下一个惊喜
            </button>
          </div>
        </div>

        <!-- 主题切换和特效按钮 -->
        <div class="control-panel">
          <button @click="changeTheme" class="theme-btn">
            🎨 切换主题
          </button>
          <button @click="triggerSuperEffect" class="super-btn">
            ✨ 超级特效
          </button>
        </div>

        <div class="navigation-buttons">
          <button @click="switchView('memories')" class="nav-btn">
            📸 我们的回忆
          </button>
          <button @click="switchView('wishes')" class="nav-btn">
            🌟 许愿池
          </button>
          <button @click="switchView('countdown')" class="nav-btn">
            ⏰ 爱的倒计时
          </button>
          <button @click="switchView('games')" class="nav-btn">
            🎮 爱情小游戏
          </button>
          <button @click="switchView('music')" class="nav-btn">
            🎵 浪漫音乐盒
          </button>
          <button @click="switchView('videos')" class="nav-btn">
            🎬 我们的视频
          </button>
        </div>
      </div>

      <!-- 回忆相册 -->
      <div v-if="currentView === 'memories'" class="memories-view">
        <h2 class="section-title">📸 我们的美好回忆</h2>
        <div class="memory-gallery">
          <div class="memory-card" v-for="(memory, index) in memoryEntries" :key="memory.id" @click="openMemoryModal(index)">
            <div class="memory-content">
              <div class="memory-date">{{ memory.date }}</div>
              <span class="memory-emoji">{{ memory.image }}</span>
              <h3 class="memory-title">{{ memory.title }}</h3>
              <p class="memory-preview">{{ memory.content.substring(0, 50) }}...</p>
              <div class="memory-emotion" :class="memory.emotion">{{ getEmotionText(memory.emotion) }}</div>
            </div>
          </div>
        </div>
        
        <!-- 添加爱情信件按钮 -->
        <div class="love-letters-section">
          <h3 class="letters-title">💌 我写给你的信</h3>
          <div class="letters-grid">
            <div class="letter-card" v-for="(letter, index) in loveLetters" :key="letter.id" @click="openLoveLetterModal(index)">
              <div class="letter-icon">💝</div>
              <h4>{{ letter.title }}</h4>
              <p class="letter-date">{{ letter.date }}</p>
            </div>
          </div>
        </div>
        
        <button @click="switchView('welcome')" class="back-btn">💝 返回首页</button>
      </div>

      <!-- 许愿池 -->
      <div v-if="currentView === 'wishes'" class="wishes-view">
        <h2 class="section-title">🌟 我们的许愿池</h2>
        <div class="wish-container">
          <div class="wish-card">
            <h3>💫 我的愿望</h3>
            <p>希望我们永远在一起，每天都像七夕一样浪漫</p>
          </div>
          <div class="wish-card">
            <h3>🌙 月亮的祝福</h3>
            <p>愿你的笑容永远灿烂如星光</p>
          </div>
          <div class="wish-card">
            <h3>⭐ 星星的诺言</h3>
            <p>无论走到哪里，我都会陪在你身边</p>
          </div>
        </div>
        <button @click="createHeart" class="wish-btn">✨ 许下新愿望</button>
        <button @click="switchView('welcome')" class="back-btn">💝 返回首页</button>
      </div>

      <!-- 爱的倒计时 -->
      <div v-if="currentView === 'countdown'" class="countdown-view">
        <h2 class="section-title">⏰ 距离下个七夕还有</h2>
        <div class="countdown-display">
          <div class="time-unit">
            <span class="time-number">365</span>
            <span class="time-label">天</span>
          </div>
          <div class="time-unit">
            <span class="time-number">24</span>
            <span class="time-label">小时</span>
          </div>
          <div class="time-unit">
            <span class="time-number">60</span>
            <span class="time-label">分钟</span>
          </div>
        </div>
        <p class="countdown-message">每一秒都在想你 💕</p>
        <button @click="switchView('welcome')" class="back-btn">💝 返回首页</button>
      </div>

      <!-- 爱情小游戏 -->
      <div v-if="currentView === 'games'" class="games-view">
        <h2 class="section-title">🎮 爱情小游戏</h2>
        <div class="games-grid">
          <div class="game-card" @click="triggerRandomEffect">
            <div class="game-icon">💘</div>
            <h3>爱心射击</h3>
            <p>点击发射爱心箭</p>
          </div>
          <div class="game-card" @click="changeTheme">
            <div class="game-icon">🌈</div>
            <h3>彩虹变换</h3>
            <p>切换浪漫主题</p>
          </div>
          <div class="game-card" @click="triggerSuperEffect">
            <div class="game-icon">✨</div>
            <h3>魔法烟花</h3>
            <p>释放超级特效</p>
          </div>
          <button class="emotion-btn romantic-btn" @click="showNextMessage">
            <span class="btn-icon">💖</span>
            <span class="btn-text">好感动</span>
            <div class="btn-sparkle"></div>
          </button>
          <button class="emotion-btn love-btn" @click="showNextMessage">
            <span class="btn-icon">💕</span>
            <span class="btn-text">我也爱你</span>
            <div class="btn-sparkle"></div>
          </button>
          <div class="game-card" @click="showNextMessage">
            <div class="game-icon">💌</div>
            <h3>情话生成器</h3>
            <p>随机甜蜜话语</p>
          </div>
        </div>
        <button @click="switchView('welcome')" class="back-btn">💝 返回首页</button>
      </div>

      <!-- 浪漫音乐盒 -->
      <div v-if="currentView === 'music'" class="music-view">
        <h2 class="section-title">🎵 浪漫音乐盒</h2>
        
        <!-- 音乐播放器 -->
        <div class="music-player">
          <!-- 唱片动画 -->
          <div class="music-disc" :class="{ spinning: currentMusic === 'playing' }">
            <div class="disc-center">
              <span class="current-song-emoji">{{ musicPlaylist[currentSongIndex]?.emoji || '🎶' }}</span>
            </div>
            <div class="disc-reflection"></div>
          </div>
          
          <!-- 当前播放信息 -->
          <div class="current-song-info" v-if="currentAudioUrl">
            <h3>{{ musicPlaylist[currentSongIndex]?.title }}</h3>
            <p>{{ musicPlaylist[currentSongIndex]?.artist }}</p>
          </div>
          
          <!-- 播放控制 -->
          <div class="music-controls">
            <button @click="prevSong" class="control-btn">⏮️</button>
            <button @click="toggleMusicPlay" class="music-btn play-btn">
              {{ currentMusic === 'playing' ? '⏸️' : '▶️' }}
            </button>
            <button @click="nextSong" class="control-btn">⏭️</button>
          </div>
          
          <!-- 进度条 -->
          <div class="audio-progress-container">
            <div class="progress-bar" @click="seekAudio">
              <div class="progress-fill" :style="{ width: audioProgress + '%' }"></div>
            </div>
            <div class="time-display">
              <span>{{ formatTime(audioElement?.currentTime || 0) }}</span>
              <span>{{ formatTime(audioDuration) }}</span>
            </div>
          </div>
          
          <!-- 音量控制 -->
          <div class="volume-container">
            <span>🔊</span>
            <input 
              type="range" 
              min="0" 
              max="1" 
              step="0.1" 
              :value="audioVolume" 
              @input="changeAudioVolume"
              class="volume-slider"
            >
          </div>
        </div>
        
        <!-- 播放列表 -->
        <div class="playlist">
          <h3 class="playlist-title">🎼 播放列表</h3>
          <div class="song-list">
            <div 
              class="song-item" 
              v-for="(song, index) in musicPlaylist" 
              :key="song.id"
              @click="playMusic(index)"
              :class="{ active: currentSongIndex === index, playing: currentSongIndex === index && currentMusic === 'playing' }"
            >
              <div class="song-info">
                <span class="song-emoji">{{ song.emoji }}</span>
                <div class="song-details">
                  <h4>{{ song.title }}</h4>
                  <p>{{ song.artist }}</p>
                </div>
              </div>
              <div class="song-status">
                <span v-if="isDevelopment">
                  {{ song.url ? '✅' : '📤' }}
                </span>
                <span v-else>
                  {{ song.url ? '✅' : '⏳' }}
                </span>
                <span v-if="currentSongIndex === index && currentMusic === 'playing'" class="playing-indicator">🎵</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 音乐操作按钮 -->
        <div class="music-actions">
          <button v-if="isDevelopment" @click="showMusicUpload = true" class="upload-btn">
            📤 上传新音乐
          </button>
          <button @click="triggerSuperEffect" class="effect-btn">
            ✨ 音乐特效
          </button>
          <div v-if="isDevelopment" class="dev-notice">
            💡 开发模式：上传的音乐请保存到 public/music/ 目录
          </div>
        </div>
        
        <button @click="switchView('welcome')" class="back-btn">💝 返回首页</button>
      </div>

      <!-- 视频播放界面 -->
      <div v-if="currentView === 'videos'" class="videos-view">
        <h2 class="section-title">🎬 我们的珍贵回忆</h2>
        
        <!-- 视频播放器 -->
        <div class="video-player-container" v-if="currentVideoUrl">
          <div class="video-player">
            <video 
              :src="currentVideoUrl" 
              @timeupdate="updateVideoProgress"
              @loadedmetadata="updateVideoDuration"
              @ended="nextVideo"
              :volume="videoVolume"
              class="romantic-video"
              controls
            ></video>
            
            <!-- 自定义视频控制栏 -->
            <div class="video-controls" v-if="showVideoControls">
              <div class="video-info">
                <h3>{{ videoPlaylist[currentVideoIndex]?.title }}</h3>
                <p>{{ videoPlaylist[currentVideoIndex]?.description }}</p>
              </div>
              
              <div class="control-buttons">
                <button @click="prevVideo" class="control-btn">⏮️</button>
                <button @click="toggleVideoPlay" class="control-btn play-btn">
                  {{ isVideoPlaying ? '⏸️' : '▶️' }}
                </button>
                <button @click="nextVideo" class="control-btn">⏭️</button>
              </div>
              
              <div class="progress-container">
                <div class="progress-bar" @click="seekVideo">
                  <div class="progress-fill" :style="{ width: videoProgress + '%' }"></div>
                </div>
              </div>
              
              <div class="volume-container">
                <span>🔊</span>
                <input 
                  type="range" 
                  min="0" 
                  max="1" 
                  step="0.1" 
                  :value="videoVolume" 
                  @input="changeVideoVolume"
                  class="volume-slider"
                >
              </div>
            </div>
          </div>
        </div>
        
        <!-- 视频播放列表 -->
        <div class="video-playlist">
          <h3 class="playlist-title">📽️ 视频列表</h3>
          <div class="video-grid">
            <div 
              class="video-card" 
              v-for="(video, index) in videoPlaylist" 
              :key="video.id"
              @click="playVideo(index)"
              :class="{ active: currentVideoIndex === index }"
            >
              <div class="video-thumbnail">
                <span class="thumbnail-icon">{{ video.thumbnail }}</span>
                <div class="play-overlay">
                  <span class="play-icon">▶️</span>
                </div>
              </div>
              <div class="video-info">
                <h4>{{ video.title }}</h4>
                <p>{{ video.description }}</p>
                <div class="video-status">
                  <span v-if="isDevelopment">
                    {{ video.url ? '✅ 已上传' : '📤 点击上传' }}
                  </span>
                  <span v-else>
                    {{ video.url ? '✅ 可播放' : '⏳ 暂未添加' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 视频操作按钮 -->
        <div class="video-actions">
          <button v-if="isDevelopment" @click="showVideoUpload = true" class="upload-btn">
            📤 上传新视频
          </button>
          <button @click="triggerSuperEffect" class="effect-btn">
            ✨ 播放特效
          </button>
          <div v-if="isDevelopment" class="dev-notice">
            💡 开发模式：上传的视频请保存到 public/videos/ 目录
          </div>
        </div>
        
        <button @click="switchView('welcome')" class="back-btn">💝 返回首页</button>
      </div>
    </div>

    <!-- 回忆详情模态框 -->
    <div v-if="showMemoryModal" class="modal-overlay" @click="showMemoryModal = false">
      <div class="memory-modal" @click.stop>
        <div class="modal-close" @click="showMemoryModal = false">✕</div>
        <div class="memory-detail">
          <div class="memory-header">
            <span class="memory-large-emoji">{{ memoryEntries[currentMemoryIndex]?.image }}</span>
            <div class="memory-info">
              <h2>{{ memoryEntries[currentMemoryIndex]?.title }}</h2>
              <p class="memory-date-detail">{{ memoryEntries[currentMemoryIndex]?.date }}</p>
            </div>
          </div>
          <div class="memory-story">
            <p>{{ memoryEntries[currentMemoryIndex]?.content }}</p>
            <div class="memory-reflection">
              <h4>💭 那时的感受</h4>
              <p>每当想起这个时刻，我的心都会变得特别温暖。这些珍贵的回忆让我们的爱情变得更加深刻和真实。</p>
            </div>
          </div>
          <div class="memory-actions">
            <button @click="triggerSuperEffect" class="memory-btn">💖 重温这份感动</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 爱情信件模态框 -->
    <div v-if="showLoveLetterModal" class="modal-overlay" @click="showLoveLetterModal = false">
      <div class="letter-modal" @click.stop>
        <div class="modal-close" @click="showLoveLetterModal = false">✕</div>
        <div class="letter-detail">
          <div class="letter-header">
            <h2>💌 {{ loveLetters[currentLetterIndex]?.title }}</h2>
            <p class="letter-date">{{ loveLetters[currentLetterIndex]?.date }}</p>
          </div>
          <div class="letter-content">
            <p>{{ loveLetters[currentLetterIndex]?.content }}</p>
            <div class="letter-signature">
              <p>永远爱你的，</p>
              <p class="signature">你的专属男朋友 💕</p>
            </div>
          </div>
          <div class="letter-actions">
            <button @click="triggerEmotionalMoment" class="letter-btn">💝 感受这份爱意</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 惊喜弹窗 -->
    <div v-if="showSurpriseModal" class="modal-overlay surprise-overlay" @click="closeSurpriseModal">
      <div class="surprise-modal" @click.stop>
        <div class="modal-close" @click="closeSurpriseModal">✕</div>
        <div class="surprise-content">
          <div class="surprise-icon">🎉</div>
          <h2>💕 突然想对你说</h2>
          <p class="surprise-message">{{ surpriseMessages[Math.floor(Math.random() * surpriseMessages.length)] }}</p>
          <div class="surprise-actions">
            <button @click="triggerSuperEffect; closeSurpriseModal()" class="surprise-btn">💖 好感动</button>
            <button @click="closeSurpriseModal" class="surprise-btn secondary">😊 我也爱你</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 情感覆盖层 -->
    <div v-if="showEmotionalOverlay" class="emotional-overlay">
      <div class="emotional-text">
        <h3>💕 感动时刻 +1</h3>
        <p>你已经被感动了 {{ emotionalMoments }} 次</p>
      </div>
    </div>

    <!-- 视频上传模态框 -->
    <div v-if="showVideoUpload" class="modal-overlay" @click="showVideoUpload = false">
      <div class="upload-modal" @click.stop>
        <div class="modal-close" @click="showVideoUpload = false">✕</div>
        <div class="upload-content">
          <div class="upload-icon">🎬</div>
          <h2>💕 上传我们的回忆视频</h2>
          <p class="upload-description">选择一个特别的视频，让我们一起重温美好时光</p>
          
          <div class="upload-area">
            <input 
              type="file" 
              accept="video/*" 
              @change="handleVideoUpload"
              class="file-input"
              id="videoUpload"
            >
            <label for="videoUpload" class="upload-label">
              <div class="upload-placeholder">
                <span class="upload-emoji">📁</span>
                <span>点击选择视频文件</span>
                <small>支持 MP4, AVI, MOV 等格式</small>
              </div>
            </label>
          </div>
          
          <div class="upload-tips">
            <h4>💡 小贴士</h4>
            <ul>
              <li>建议视频大小不超过 100MB</li>
              <li>推荐分辨率：1080p 或以下</li>
              <li>支持的格式：MP4, AVI, MOV, WMV</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 音乐上传模态框 -->
    <div v-if="showMusicUpload" class="modal-overlay" @click="showMusicUpload = false">
      <div class="upload-modal" @click.stop>
        <div class="modal-close" @click="showMusicUpload = false">✕</div>
        <div class="upload-content">
          <div class="upload-icon">🎵</div>
          <h2>💕 上传我们的浪漫音乐</h2>
          <p class="upload-description">选择一首特别的歌曲，让我们一起聆听爱的旋律</p>
          
          <div class="upload-area">
            <input 
              type="file" 
              accept="audio/*" 
              @change="handleMusicUpload"
              class="file-input"
              id="musicUpload"
            >
            <label for="musicUpload" class="upload-label">
              <div class="upload-placeholder">
                <span class="upload-emoji">🎼</span>
                <span>点击选择音乐文件</span>
                <small>支持 MP3, WAV, FLAC 等格式</small>
              </div>
            </label>
          </div>
          
          <div class="upload-tips">
            <h4>💡 小贴士</h4>
            <ul>
              <li>建议音乐大小不超过 50MB</li>
              <li>推荐格式：MP3 (320kbps)</li>
              <li>支持的格式：MP3, WAV, FLAC, AAC</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
/* 基础样式 */
.romantic-app {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow-y: auto;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-top: 40px; /* 为自定义标题栏留出空间 */
  padding-bottom: 50px; /* 为底部按钮留出空间 */
}

/* 隐藏滚动条但保留滚动功能 */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* 确保内容仍可滚动 */
.content-area, .main-content, .message-container, .game-grid {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: calc(100vh - 90px); /* 确保有足够高度可滚动 */
}

.content-area::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.message-container::-webkit-scrollbar,
.game-grid::-webkit-scrollbar {
  display: none;
}

/* 确保主要内容区域可以滚动到所有按钮 */
.main-content {
  padding-bottom: 100px; /* 为底部按钮预留更多空间 */
}

.game-grid {
  padding-bottom: 80px; /* 游戏网格底部留空 */
}

/* 自定义标题栏样式 */
.custom-titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(135deg, 
    rgba(255, 182, 193, 0.95) 0%, 
    rgba(255, 192, 203, 0.95) 25%,
    rgba(255, 160, 180, 0.95) 50%,
    rgba(255, 105, 180, 0.95) 75%,
    rgba(255, 20, 147, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10000;
  box-shadow: 0 2px 20px rgba(255, 105, 180, 0.3);
  user-select: none;
}

.titlebar-left {
  display: flex;
  align-items: center;
  padding-left: 15px;
  flex: 1;
}

.app-icon {
  font-size: 18px;
  margin-right: 8px;
  animation: heartPulse 2s ease-in-out infinite;
}

@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.app-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.titlebar-center {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

.current-time {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: 'Consolas', monospace;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.love-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.heart-beat {
  font-size: 12px;
  animation: heartBeat 1.5s ease-in-out infinite;
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
}

.love-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.titlebar-right {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.titlebar-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border-radius: 6px;
  margin-right: 2px;
}

.titlebar-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 1);
  transform: scale(1.05);
}

.minimize-btn:hover {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.maximize-btn:hover {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

.close-btn:hover {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

.titlebar-btn:active {
  transform: scale(0.95);
}

/* 标题栏渐变动画 */
.custom-titlebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent
  );
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 美化情感按钮 */
.emotion-btn {
  position: relative;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
}

.romantic-btn {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
  box-shadow: 0 8px 25px rgba(255, 154, 158, 0.4);
}

.love-btn {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #ffd1ff 100%);
  box-shadow: 0 8px 25px rgba(168, 237, 234, 0.4);
}

.btn-icon {
  font-size: 18px;
  animation: iconFloat 2s ease-in-out infinite;
}

.btn-text {
  font-weight: 600;
  letter-spacing: 0.5px;
}

.btn-sparkle {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.4), 
    transparent
  );
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

@keyframes sparkle {
  0% { left: -100%; }
  100% { left: 100%; }
}

.romantic-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(255, 154, 158, 0.6);
}

.love-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(168, 237, 234, 0.6);
}

/* 动态背景 */
.dynamic-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
  background-size: 400% 400%;
  animation: gradientFlow 15s ease infinite;
  z-index: -1;
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

/* 动态波浪 */
.animated-waves {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  z-index: 2;
}

.animated-waves::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") repeat-x;
  animation: wave 10s linear infinite;
}

@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 浮动气泡 */
.floating-bubbles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.bubble {
  position: absolute;
  bottom: -100px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: bubbleFloat 15s infinite linear;
}

@keyframes bubbleFloat {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(1);
    opacity: 0;
  }
}

/* 主题变换 */
.theme-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.theme-pink { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%); }
.theme-blue { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.theme-golden { background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%); }
.theme-rainbow { 
  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  background-size: 400% 400%;
  animation: rainbowShift 3s ease-in-out infinite;
}

@keyframes rainbowShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 星空背景 */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, #fff 0%, #ffd700 50%, transparent 100%);
  border-radius: 50%;
  animation: twinkle 3s infinite;
  box-shadow: 0 0 10px #fff, 0 0 20px #ffd700, 0 0 30px #ffd700;
}

@keyframes twinkle {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg); 
    box-shadow: 0 0 5px #fff;
  }
  50% { 
    opacity: 1; 
    transform: scale(1.5) rotate(180deg); 
    box-shadow: 0 0 20px #fff, 0 0 30px #ffd700, 0 0 40px #ffd700;
  }
}

/* 烟花特效 */
.fireworks-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

.firework {
  position: absolute;
  width: 4px;
  height: 4px;
}

.explosion {
  position: relative;
  width: 4px;
  height: 4px;
  animation: explode 2s ease-out forwards;
}

.explosion::before,
.explosion::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  border-radius: 50%;
  animation: fireworkParticle 2s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(20);
    opacity: 0.8;
  }
  100% {
    transform: scale(40);
    opacity: 0;
  }
}

@keyframes fireworkParticle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--random-x, 100px), var(--random-y, 100px)) scale(0);
    opacity: 0;
  }
}

/* 彩虹特效 */
.rainbow-container {
  position: fixed;
  top: 20%;
  left: 0;
  width: 100%;
  height: 60%;
  pointer-events: none;
  z-index: 12;
}

.rainbow {
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #ff0000 10%, 
    #ff7f00 20%, 
    #ffff00 30%, 
    #00ff00 40%, 
    #0000ff 50%, 
    #4b0082 60%, 
    #9400d3 70%, 
    transparent 100%
  );
  border-radius: 50% 50% 0 0;
  animation: rainbowGlow 3s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes rainbowGlow {
  0%, 100% {
    transform: scale(1) translateY(0);
    filter: blur(0px);
  }
  50% {
    transform: scale(1.1) translateY(-20px);
    filter: blur(2px);
  }
}

/* 魔法粒子 */
.magic-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 11;
}

.particle {
  position: absolute;
  font-size: 1.5rem;
  animation: magicFloat 4s ease-in-out infinite;
  text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
}

@keyframes magicFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-50px) rotate(90deg) scale(1.2);
    opacity: 1;
  }
  50% {
    transform: translateY(-100px) rotate(180deg) scale(0.8);
    opacity: 0.9;
  }
  75% {
    transform: translateY(-50px) rotate(270deg) scale(1.1);
    opacity: 1;
  }
}

/* 爱心雨 */
.love-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 13;
}

.rain-drop {
  position: absolute;
  top: -50px;
  font-size: 1.5rem;
  animation: rainFall 3s linear infinite;
  text-shadow: 0 0 5px #ff69b4;
}

@keyframes rainFall {
  0% {
    transform: translateY(-50px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0.3;
  }
}

/* 特殊效果覆盖层 */
.special-effect-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  animation: specialPulse 2s ease-in-out;
  z-index: 20;
  pointer-events: none;
}

@keyframes specialPulse {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(2);
  }
}

/* 爱心动画 */
.hearts-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.heart {
  position: absolute;
  font-size: 2rem;
  animation: floatUp 4s ease-out forwards;
  text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff1493, 0 0 30px #ff69b4;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.5);
    opacity: 1;
  }
  50% {
    transform: translateY(50vh) rotate(180deg) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100px) rotate(360deg) scale(0.3);
    opacity: 0;
  }
}

/* 爱情指数 */
.love-meter {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 1.5rem;
  margin: 1rem 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.meter-label {
  color: white;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.meter-bar {
  width: 100%;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin: 1rem 0;
}

.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  border-radius: 10px;
  transition: width 0.8s ease;
  animation: meterGlow 2s ease-in-out infinite;
}

@keyframes meterGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
  50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px #ffd700; }
}

.meter-score {
  color: #feca57;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 0 10px #feca57;
}

/* 控制面板 */
.control-panel {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.theme-btn, .super-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 50px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.super-btn {
  background: linear-gradient(45deg, #ff9a9e, #fecfef);
  animation: superGlow 2s ease-in-out infinite;
}

@keyframes superGlow {
  0%, 100% { 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 12px 30px rgba(255, 154, 158, 0.6), 0 0 40px rgba(254, 207, 239, 0.4);
    transform: scale(1.05);
  }
}

.pulse-btn {
  animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes buttonPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 游戏界面 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.game-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.game-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.25);
}

.game-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: gameIconFloat 3s ease-in-out infinite;
}

@keyframes gameIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(10deg); }
}

.game-card h3 {
  font-size: 1.3rem;
  margin: 1rem 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 音乐播放器 */
.music-player {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 25px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  max-width: 400px;
  margin: 2rem auto;
}

.music-disc {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  border-radius: 50%;
  margin: 0 auto 2rem;
  position: relative;
  transition: all 0.3s ease;
}

.music-disc.spinning {
  animation: discSpin 3s linear infinite;
}

@keyframes discSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.disc-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.music-controls {
  margin: 2rem 0;
}

.music-btn {
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  border: none;
  border-radius: 50px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.playlist {
  text-align: left;
  margin-top: 2rem;
}

.song-item {
  color: rgba(255, 255, 255, 0.8);
  padding: 0.8rem;
  border-radius: 10px;
  margin: 0.5rem 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.song-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.song-item.active {
  background: rgba(255, 255, 255, 0.2);
  color: #feca57;
  font-weight: bold;
}

/* 主内容区域 */
.main-content {
  position: relative;
  z-index: 5;
  padding: 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 欢迎界面 */
.welcome-view {
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.romantic-title {
  margin-bottom: 3rem;
}

.gradient-text {
  font-size: 3.5rem;
  font-weight: bold;
  background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s ease-in-out infinite;
  margin: 0;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 爱心卡片 */
.love-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 25px;
  padding: 2.5rem;
  margin: 2rem 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.love-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.emoji-large {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.love-card h2 {
  color: white;
  font-size: 2rem;
  margin: 1rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.love-message {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 1.5rem 0;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 按钮样式 */
.romantic-btn, .nav-btn, .back-btn, .wish-btn {
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  border: none;
  border-radius: 50px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin: 0.5rem;
}

.romantic-btn:hover, .nav-btn:hover, .back-btn:hover, .wish-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
  background: linear-gradient(45deg, #ff5252, #fdd835);
}

.navigation-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* 回忆相册 */
.memories-view, .wishes-view, .countdown-view {
  text-align: center;
  max-width: 800px;
  width: 100%;
}

.section-title {
  font-size: 2.5rem;
  color: white;
  margin-bottom: 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.memory-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.memory-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.memory-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.memory-placeholder {
  color: white;
}

.memory-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

/* 许愿池 */
.wish-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.wish-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.3s ease;
}

.wish-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.wish-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 倒计时 */
.countdown-display {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.time-unit {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  min-width: 120px;
}

.time-number {
  display: block;
  font-size: 3rem;
  font-weight: bold;
  color: #feca57;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.time-label {
  display: block;
  font-size: 1.2rem;
  color: white;
  margin-top: 0.5rem;
}

.countdown-message {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 2rem 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 视频播放器样式 */
.videos-view {
  text-align: center;
  max-width: 1000px;
  width: 100%;
}

.video-player-container {
  margin: 2rem 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 25px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.video-player {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.romantic-video {
  width: 100%;
  height: auto;
  max-height: 500px;
  border-radius: 20px;
  object-fit: cover;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 2rem;
  color: white;
  transition: opacity 0.3s ease;
}

.video-info h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.video-info p {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.control-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
}

.control-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.play-btn {
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
  background: linear-gradient(45deg, #ff6b6b, #feca57);
}

.progress-container {
  margin: 1rem 0;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);
  border-radius: 3px;
  transition: width 0.1s ease;
}

.volume-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.volume-slider {
  width: 100px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  border-radius: 50%;
  cursor: pointer;
}

/* 视频播放列表 */
.video-playlist {
  margin: 3rem 0;
}

.playlist-title {
  font-size: 2rem;
  color: white;
  margin-bottom: 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.video-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.video-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.25);
}

.video-card.active {
  border: 2px solid #feca57;
  box-shadow: 0 0 30px rgba(254, 202, 87, 0.5);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 150px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  overflow: hidden;
}

.thumbnail-icon {
  font-size: 4rem;
  opacity: 0.8;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover .play-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 3rem;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.video-card .video-info {
  color: white;
  text-align: left;
}

.video-card .video-info h4 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.video-card .video-info p {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.video-status {
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.2);
  display: inline-block;
}

/* 视频操作按钮 */
.video-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.upload-btn, .effect-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 50px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.effect-btn {
  background: linear-gradient(45deg, #ff9a9e, #fecfef);
}

.upload-btn:hover, .effect-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

/* 视频上传模态框 */
.upload-modal {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 25px;
  padding: 3rem;
  max-width: 500px;
  width: 90%;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  color: #333;
}

.upload-content {
  text-align: center;
}

.upload-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.upload-modal h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.upload-description {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.8;
}

.upload-area {
  margin: 2rem 0;
}

.file-input {
  display: none;
}

.upload-label {
  display: block;
  cursor: pointer;
}

.upload-placeholder {
  border: 2px dashed #ccc;
  border-radius: 15px;
  padding: 3rem 2rem;
  transition: all 0.3s ease;
}

.upload-placeholder:hover {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.05);
}

.upload-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.upload-placeholder span:not(.upload-emoji) {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.upload-placeholder small {
  font-size: 0.9rem;
  opacity: 0.7;
}

.upload-tips {
  text-align: left;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  padding: 1.5rem;
  margin-top: 2rem;
}

.upload-tips h4 {
  margin-bottom: 1rem;
  color: #ff6b6b;
}

.upload-tips ul {
  list-style: none;
  padding: 0;
}

.upload-tips li {
  padding: 0.3rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.upload-tips li::before {
  content: '💡';
  position: absolute;
  left: 0;
}

/* 模态框通用样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 0, 0, 0.7);
  transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .gradient-text {
    font-size: 2.5rem;
  }
  
  .love-card {
    padding: 1.5rem;
    margin: 1rem 0;
  }
  
  .navigation-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .countdown-display {
    flex-direction: column;
    align-items: center;
  }
  
  .main-content {
    padding: 1rem;
  }
  
  .video-grid {
    grid-template-columns: 1fr;
  }
  
  .video-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .control-buttons {
    gap: 0.5rem;
  }
  
  .control-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .play-btn {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }
  
  .upload-modal {
    padding: 2rem;
    margin: 1rem;
  }
}

/* 开发环境提示样式 */
.dev-notice {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.5);
  border-radius: 15px;
  padding: 1rem;
  margin-top: 1rem;
  color: #fff3cd;
  font-size: 0.9rem;
  text-align: center;
  backdrop-filter: blur(10px);
}

/* 音乐播放器样式 */
.music-view {
  text-align: center;
  max-width: 800px;
  width: 100%;
}

.music-player {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border-radius: 25px;
  padding: 3rem 2rem;
  margin: 2rem 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.music-disc {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  border-radius: 50%;
  margin: 0 auto 2rem;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.music-disc.spinning {
  animation: discSpin 3s linear infinite;
}

@keyframes discSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.disc-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.current-song-emoji {
  animation: pulse 2s infinite;
}

.disc-reflection {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 30%;
  height: 30%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
  border-radius: 50%;
  pointer-events: none;
}

.current-song-info {
  margin: 2rem 0;
  color: white;
}

.current-song-info h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.current-song-info p {
  font-size: 1.2rem;
  opacity: 0.8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.music-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
}

.music-btn {
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.control-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.audio-progress-container {
  margin: 2rem 0;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);
  border-radius: 4px;
  transition: width 0.1s ease;
}

.time-display {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.volume-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.volume-slider {
  width: 120px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  border-radius: 50%;
  cursor: pointer;
}

/* 播放列表样式 */
.playlist {
  margin: 3rem 0;
}

.playlist-title {
  font-size: 2rem;
  color: white;
  margin-bottom: 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.song-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.song-item {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.song-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.25);
}

.song-item.active {
  border: 2px solid #feca57;
  box-shadow: 0 0 20px rgba(254, 202, 87, 0.5);
}

.song-item.playing {
  background: linear-gradient(45deg, rgba(255, 107, 107, 0.3), rgba(254, 202, 87, 0.3));
  animation: musicPulse 2s ease-in-out infinite;
}

@keyframes musicPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.song-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.song-emoji {
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.song-details {
  text-align: left;
}

.song-details h4 {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.song-details p {
  font-size: 0.9rem;
  opacity: 0.8;
}

.song-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
}

.playing-indicator {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 音乐操作按钮 */
.music-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.music-actions .upload-btn,
.music-actions .effect-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 50px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.music-actions .effect-btn {
  background: linear-gradient(45deg, #ff9a9e, #fecfef);
}

.music-actions .upload-btn:hover,
.music-actions .effect-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}
</style>